<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>VUE 学习</title>
	</head>

	<body>
		<div id="app">
			<h1> 组件化应用(二)</h1>
			<div id="app-7">
				<ol>
					<!--
					      现在我们为每个 todo-item 提供 todo 对象
					      todo 对象是变量，即其内容可以是动态的。
					      我们也需要为每个组件提供一个“key”，稍后再
					      作详细解释。
					    -->
					<todo-item 
						v-for="item in groceryList" 						
						v-bind:todo="item" 
						v-bind:key="item.id">											
					</todo-item>
				</ol>
				
				
			</div>
		</div>

	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script type="text/javascript">
		
		Vue.component('todo-item', {
			props: ['todo'],
			template: '<li> {{ todo.id }}{{ todo.text }}</li>'
		})

		var app7 = new Vue({
			el: '#app-7',
			data: {
				groceryList: [{
						id: 0,
						text: '蔬菜'
					},
					{
						id: 1,
						text: '奶酪'
					},
					{
						id: 2,
						text: '随便其它什么人吃的东西'
					}
				]
			}
		})
	</script>

</html>